<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='角色管理',active='roleManage'">
<header th:replace="admin/header::headerFragment(${title},${active})"></header>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="admin/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <button id="addLayer" th:onclick="'addRoleDialog('+${user.id}+');'"
                                class="btn btn-primary btn-sm waves-effect waves-light m-b-5"><i
                                class="fa fa-edit"></i> <span>新增</span></button>
                    </div>
                    <div class="col-sm-12">
                        <a></a>
                    </div>
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th width="8%">id</th>
                                <th width="8%">角色</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <th:block th:each="role:${rolePage.list}">
                                <tr th:id="${role.id}">
                                    <td>
                                        <th:block th:text="${role.id}"/>
                                    </td>
                                    <td>
                                        <th:block th:text="${role.name}"/>
                                    </td>
                                    <td>
                                        <a tooltip title="添加子角色" th:onclick="'addChildDialog('+${role.id}+');'"
                                           th:data-title="'添加【'+${role.name}+'】的子角色'" data-area="600,300"
                                           class="jbolt_table_editbtn">
                                            <i class="fa fa-plus c-info"></i></a>
                                        <a tooltip title="编辑" th:onclick="'editRoleDialog('+${role.id}+');'" data-scroll="yes"
                                           data-handler="refreshJBoltTable" th:data-title="'编辑【'+${role.name}+'】'"
                                           data-title="编辑" class="jbolt_table_editbtn"><i
                                                class="fa fa-pencil c-primary"></i>
                                        </a>
                                        <a tooltip title="删除" th:onclick="'deleteRole('+${role.id}+');'"
                                           data-handler="refreshJBoltTable" class="jbolt_table_delbtn">
                                            <i class="fa fa-remove c-danger"></i>
                                        </a>
                                        <a tooltip href="admin/rolepermission/settingTree/${id}" data-dialogbtn
                                           data-scroll="yes" data-title="为角色【${name}】设置权限"
                                           data-area="700,90%" class="jbolt_table_btn"><i class="fa fa-cogs c-info"></i>
                                        </a>
                                        <a tooltip href="admin/role/users/${id}" data-dialogbtn data-btn="close"
                                           data-scroll="yes" data-title="角色【${name}】-用户列表"
                                           data-area="980,80%" class="jbolt_table_btn"><i
                                                class="fa fa-users c-danger"></i>
                                        </a>
                                        <!--                                        <a id="modalLayer" th:onclick="'editUser('+${user.id}+');'"-->
                                        <button id="modalLayer" th:onclick="'editUser('+${user.id}+');'"
                                                class="btn btn-primary btn-sm waves-effect waves-light m-b-5"><i
                                                class="fa fa-edit"></i> <span>编辑</span></button>
                                        <a href="javascript:void(0)" th:onclick="'deleteUser('+${user.id}+');'"
                                           class="btn btn-danger btn-sm waves-effect waves-light m-b-5"><i
                                                class="fa fa-trash-o"></i> <span>删除</span></a>
                                    </td>
                                </tr>
                            </th:block>

                            </tbody>
                        </table>
                        <!--                        添加角色模态框-->
                        <div class="modal fade" id="addModal" tabindex="-1" role="dialog"
                             aria-labelledby="addModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title text-center" id="addModalLabel">新增角色</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal m-t-20" method="post" id="addRoleForm"
                                              onsubmit="return false">
                                            <input class="input-lg input-border" id="user_Id" name="id" type="hidden"
                                                   required=""
                                                   placeholder="id"/>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="col-sm-2 col-form-label">角色名</label>
                                                    <input class="input-lg input-border" id="name" name="name"
                                                           type="text" required=""
                                                           placeholder="角色名"/>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" onclick="addRole()" class="btn btn-primary">保存</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
                        <!--添加子角色模态框-->
                        <div class="modal fade" id="addChildModal" tabindex="-1" role="dialog"
                             aria-labelledby="addModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title text-center" id="addChildModalLabel">新增角色</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal m-t-20" method="post" id="addChildRoleForm"
                                              onsubmit="return false">
                                            <input class="input-lg input-border" name="id" type="hidden" required=""
                                                   placeholder="id"/>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="col-sm-2 col-form-label">角色名</label>
                                                    <input class="input-lg input-border" id="roleName" name="name"
                                                           type="text" required=""
                                                           placeholder="角色名"/>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" onclick="addRole()" class="btn btn-primary">保存</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
                        <div th:replace="comm/macros :: pageAdminNav(${rolePage})"></div>
                    </div>
                </div>
                <div th:replace="admin/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    let tale = new $.tale();
    function deleteRole(id) {
        tale.alertConfirm({
            title: '确定删除该用户吗?',
            then: function () {
                $.ajax({
                    url: '/admin/roleManage/delete',
                    type: "post",
                    data: {id: id},
                    success: function (result) {
                        if (result && result.code === 200) {
                            tale.alertOkAndReload('删除成功');
                        } else {
                            tale.alertError(result.msg || '删除失败');
                        }
                    }
                });
            }
        });
    }

    //添加角色弹出框
    function addRoleDialog() {
        DialogUtil.openNewDialog({
            title: "添加角色",
            width: "1200",
            height: "800",
            url: "/admin/roleManage/addRoleForm",
        })
    }

    //添加子角色弹框
    function addChildDialog(id) {
        DialogUtil.openNewDialog({
            title: "添加子角色",
            width: "1200",
            height: "800",
            url: "/admin/roleManage/addChileRoleForm/"+id,
        })
    }
    //编辑角色弹框
    function editRoleDialog(id) {
        DialogUtil.openNewDialog({
            title: "编辑角色",
            width: "1200",
            height: "800",
            url: "/admin/roleManage/editRoleForm/"+id,
        })
    }
</script>
</body>
</html>
